<template>
  <el-row>
    <el-row type="flex" justify="space-between" align="middle">
      <el-col class="client_icon_box" title="保存">
        <IconFont class="client_icon" type="icon-save" @click="toClient('add_to_drive')"/>
      </el-col>
      <el-col class="client_icon_box" title="检查SQL">
        <IconFont
          v-loading.fullscreen.lock="isLoading"
          class="client_icon"
          type="icon-Check"
          element-loading-text="正在校验中..."
          @click="checkSqlHandle"
        />
      </el-col>

      <el-col v-if="type == 'FlinkSQL' && taskParams && !runIng" class="client_icon_box" title="执行">
        <IconFont class="client_icon" type="icon-execute" @click="toClient('play_circle', cancelIng)"/>
      </el-col>
      <el-col v-if="type == 'FlinkSQL' && taskParams && runIng" class="client_icon_box icon_color_red" title="暂停">
        <IconFont class="client_icon" type="icon-pause" @click="toClient('pause_circle', cancelIng)"/>
      </el-col>
      <el-col v-if="type != 'FlinkSQL' && runIng" class="client_icon_box icon_color_red" title="暂停">
        <IconFont class="client_icon" type="icon-pause" @click="toClient('pause_circle', cancelIng)"/>
      </el-col>
      <el-col v-if="taskParams && releaseIng && !releaseAndOnlineIng" class="client_icon_box" title="编辑，点击进入编辑状态">
        <IconFont class="client_icon" type="icon-edit" @click="toClient('mode_edit', cancelIng)"/>
      </el-col>
      <el-col v-if="taskParams && releaseIng" class="client_icon_box" title="作业上线">
        <IconFont class="client_icon" type="icon-workOnline" @click="toClient('work_online', cancelIng)"/>
      </el-col>
      <el-col v-if="releaseAndOnlineIng" class="client_icon_box" title="作业下线">
        <IconFont class="client_icon" type="icon-download" @click="toClient('work_offline', cancelIng)"/>
      </el-col>
    </el-row>
    <el-dialog title="FlinkSql 语法和逻辑检查" :visible="medium" width="50%" :before-close="() => medium = false">
      <el-row v-if="data.length">
        <div v-for="item in data" :key="item.index" class="flex-j-s ant-div">
          <div class="ant-list">
            {{ item.index }}
          </div>
          <div class="ant-list-item-meta-content">
            <h4 class="ant-list-item-meta-title">
              <div class="ant-pro-list">
                <div class="ant-pro-list-row-title">
                  <div class="ant-space">
                    <span class="ant-tag ant-tag-blue"><span
                                                         role="img"
                                                         aria-label="console-sql"
                                                         class="anticon anticon-console-sql"
                                                       ><svg
                                                         viewBox="64 64 896 896"
                                                         focusable="false"
                                                         data-icon="console-sql"
                                                         width="1em"
                                                         height="1em"
                                                         fill="currentColor"
                                                         aria-hidden="true"
                                                       >
                                                         <defs/>
                                                         <path
                                                           d="M301.3 496.7c-23.8 0-40.2-10.5-41.6-26.9H205c.9 43.4 36.9 70.3 93.9 70.3 59.1 0 95-28.4 95-75.5 0-35.8-20-55.9-64.5-64.5l-29.1-5.6c-23.8-4.7-33.8-11.9-33.8-24.2 0-15 13.3-24.5 33.4-24.5 20.1 0 35.3 11.1 36.6 27h53c-.9-41.7-37.5-70.3-90.3-70.3-54.4 0-89.7 28.9-89.7 73 0 35.5 21.2 58 62.5 65.8l29.7 5.9c25.8 5.2 35.6 11.9 35.6 24.4.1 14.7-14.5 25.1-36 25.1z"
                                                         />
                                                         <path
                                                           d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32zm-40 488H136V212h752v416z"
                                                         />
                                                         <path
                                                           d="M828.5 486.7h-95.8V308.5h-57.4V534h153.2zm-298.6 53.4c14.1 0 27.2-2 39.1-5.8l13.3 20.3h53.3L607.9 511c21.1-20 33-51.1 33-89.8 0-73.3-43.3-118.8-110.9-118.8s-111.2 45.3-111.2 118.8c-.1 73.7 43 118.9 111.1 118.9zm0-190c31.6 0 52.7 27.7 52.7 71.1 0 16.7-3.6 30.6-10 40.5l-5.2-6.9h-48.8L542 491c-3.9.9-8 1.4-12.2 1.4-31.7 0-52.8-27.5-52.8-71.2.1-43.6 21.2-71.1 52.9-71.1z"
                                                         />
                                                       </svg></span>
                      {{ item.type }}</span>
                  </div>
                </div>
                <div class="ant-pro-list-row-subTitle flex-j-s">
                  <div class="ant-space-item">
                    <span v-if="item.parseTrue" style="background-color: rgb(68, 181, 73)"> 语法正确 </span>
                    <span v-else style="background-color: #b51f21"> 语法错误 </span>
                  </div>
                  <div class="ant-space-item">
                    <span v-if="item.explainTrue" style="background-color: rgb(16, 142, 233)"> 逻辑正确 </span>
                    <span v-else style="background-color: #b51f21"> 逻辑错误 </span>
                  </div>
                  <div class="ant-space-item">
                    {{ item.explainTime }}
                  </div>
                  <div v-if="item.error" class="ant-space-item" style="cursor: pointer" @click="copy(item.error)">
                    <span style="background-color: rgb(16, 142, 233)"> 复制错误信息 </span>
                  </div>
                </div>
              </div>
            </h4>
            <div class="ant-list-item-meta-description">
              <p>{{ item.sql }}</p>
              <pre
                v-if="item.error"
                style="
                          height: 140px;
                          background: #eee;
                          display: block;
                          overflow: scroll;
                          width: 100%;
                          padding: 0.4em 0.6em;
                          white-space: pre-wrap;
                          word-wrap: break-word;
                          background: hsla(0, 0%, 58.8%, 0.1);
                          border: 1px solid hsla(0, 0%, 39.2%, 0.2);
                          border-radius: 3px;
                        "
              >
                        {{ item.error }}
                      </pre>
            </div>
          </div>
        </div>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="medium = false">取 消</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>

<script>

import { message } from 'ant-design-vue';
import { checkSql } from '../api/workDevelopment'
import moment from 'moment'
import IconFont from './iconFont.vue'

export default {
  name: 'Client',
  components: {
    IconFont
  },
  props: {
    taskParams: { type: Object, default: () => ({}) },
    code: { type: String, default: '' },
    jarId: { type: [Number, String], default: '' },
    type: { type: String, default: '' },
    chengeForm: { type: Boolean }
  },
  data() {
    return {
      medium: false,
      data: [],
      show: false,
      isLoading: false,
      runIng: false
    }
  },
  computed: {
    // 计算属性的 getter
    // runIng: function() {
    //   return this.taskParams != null ? (this.taskParams.step === 0) : false
    // },
    cancelIng: function() {
      return this.taskParams != null ? (this.taskParams.step === 6) : false
    },
    releaseIng: function() {
      return this.taskParams != null ? (this.taskParams.step === 4) : false
    },
    releaseAndOnlineIng: function() {
      return this.taskParams != null ? (this.taskParams.step === 5) : false
    }
  },
  watch: {
    taskParams: {
      deep: true,
      handler(newValue) {
        console.log('ddddddddd', newValue)
        this.taskParams = newValue
        if (newValue.jobInstanceId > 0) {
          this.runIng = true
        } else {
          this.runIng = false
        }
        // console.log(newValue)
      }
    },
    code: {
      deep: true,
      handler(newValue) {
        // console.log(newValue)
        // this.taskParams.statement = newValue;
      }
    }
  },
  methods: {
    copy(info) {
      const input = document.createElement('input')
      input.value = info
      document.body.appendChild(input)
      input.select()
      document.execCommand('Copy')
      document.body.removeChild(input)
      message.success('复制成功')
    },
    toClient(type, cancel) {
      if (!cancel) {
        if (
          type === 'assignment_turned_in' ||
          type === 'airplane_ticket' ||
          type === 'auto_delete' ||
          type === 'play_circle'
        ) {
          let title = ''
          let msg = ''
          switch (type) {
            case 'assignment_turned_in':
              title = '发布作业'
              msg = '您确定发布作业【' + this.taskParams.name + '】吗？请确认您的作业是否已经被保存！'
              break
            case 'airplane_ticket':
              title = '异步提交作业'
              msg = '您确定异步提交作业【' + this.taskParams.name + '】到其配置的集群吗？请确认您的作业是否已经被保存！'
              break
            case 'auto_delete':
              title = '注销作业'
              msg = '您确定注销作业【' + this.taskParams.name + '】吗？'
              break
            case 'play_circle':
              msg = '执行当前作业'
              title = '执行当前的' + this.type
              break
            default:
              title = ''
              msg = '执行前请确保配置是否已经被保存！'
          }
          this.$confirm(msg, title, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          }).then(() => {
            this.$emit('client', type)
          })
            .catch(() => {
              message.info('取消操作')
            })
        } else {
          this.$emit('client', type)
        }
      }
    },
    async checkSqlHandle() {
      // 校验
      const param = this.taskParams
      param.statement = this.code
      this.isLoading = true
      const res = await checkSql(param)
      this.isLoading = false
      if (res && res.length > 0) {
        this.medium = true
        res.forEach((i) => {
          const formatDate = moment(i.explainTime).format('YYYY-MM-DD HH:mm:ss')
          return formatDate
        })
        this.data = res
      }
    }
  }
}
</script>

<style scoped lang="scss">
.mask {
  background-color: rgba($color: black, $alpha: 0.2);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  // display: flex;
  // justify-content: center;
  // align-items: center;
}

.client_icon_box {
  display: flex;
  align-items: center;
  justify-content: center;

  .client_icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  .icon_color_red {
    fill: #f61616;
  }
}

.loadingContainer {
  position: absolute;
  right: 50%;
  margin-top: -30px;
  top: 50%;
  margin-right: -110px;
  display: flex;
  background-color: white;
  color: #0079fe;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 4px;
}

.text-grey {
  color: grey;
}

.ant-space {
  display: inline-flex;
}

.flex-j-s {
  display: flex;
  flex: 1 1;
  align-items: flex-start;
  max-width: 100%;

  .ant-list {
    margin-right: 16px;
    margin-top: 20px;
  }

  .ant-tag {
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: 'tnum', 'tnum';
    display: inline-block;
    height: auto;
    margin: 0 8px 0 0;
    padding: 0 7px;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
    background: #fafafa;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    opacity: 1;
    transition: all 0.3s;
  }

  .ant-tag-blue {
    color: #096dd9;
    background: #e6f7ff;
    border-color: #91d5ff;
  }

  .ant-list-item-meta-content {
    flex: 1 0;
    width: 0;
    color: rgba(0, 0, 0, 0.85);

    .ant-list-item-meta-description {
      margin-top: 15px;
    }

    .ant-list-item-meta-title {
      margin-bottom: 4px;
      color: rgba(0, 0, 0, 0.85);
      font-size: 14px;
      line-height: 1.5715;

      .ant-pro-list {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 14px;
        line-height: 1.5715;

        .ant-pro-list-row-title {
          margin-right: 16px;
          word-break: break-all;
          cursor: pointer;
        }

        .ant-pro-list-row-subTitle {
          color: rgba(0, 0, 0, 0.45);
          padding: 10px 0;

          .ant-space-item {
            span {
              padding: 5px;
              color: #fff;
              border-radius: 3px;
            }

            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>
